<template>
	<view class="relative">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<wlk-navbar title="我的团队" fontColor="#FFFFFF" navbarType='5'></wlk-navbar>
		<view class="team-content relative pd30" :style="{background:bgColor}">
			<u-gap height="40"></u-gap>
			<view class="wlkflex justify-between">
				<view class="team-card bgw mt40 relative overHidden shadow">
					<view class="team-num bold center">{{agentInfo.team_num||0}}</view>
					<view class="title center mt10">团队总数(人)</view>
					<u-divider :dashed="true"></u-divider>
					<view class="wlkflex justify-around">
						<view class="center">
							<view class="title">一级成员(人)</view>
							<view class="other-num mt10 bold">{{agentInfo.team_num_1||0}}</view>
						</view>
						<view class="center">
							<view class="title">二级成员(人)</view>
							<view class="other-num mt10 bold">{{agentInfo.team_num_2||0}}</view>
						</view>
					</view>
					<view class="center agent mt30">
						我的邀请人：{{agentInfo.my_agent}}
					</view>
					<view class="icon">
						<uni-icons type="staff-filled" color="#FFFFFF" size="30"></uni-icons>
					</view>
				</view>
			</view>
		</view>
		<view>
			<view class="sub-box pd30 ">
				<view class="wlkflex justify-between mb20">
					<view class="head-title">团队成员</view>
					<view class="sub-item">
						<u-subsection :list="subList" :current="curNow" :activeColor="themeColor"
							@change="sectionChange"></u-subsection>
					</view>
				</view>
				<u-search shape="square" placeholder="搜索团队成员昵称、手机号" v-model="keyword" :showAction="false"
					@change="change" @search="search"></u-search>
			</view>

			<scroll-view class="team-list pd030" :style="{height:itemHeight}" scroll-y @scrolltolower="scrolltolower">
				<block v-if="loadStatus=='nomore' && teams.length==0">
					<view class="not-data">
						<u-empty :icon="uEmpty.search" text="没有搜索结果">
						</u-empty>
					</view>
				</block>
				<block v-else>
					<view v-for="(team,index) in teams" class="wlkflex justify-between team-item mb30">
						<view class="item-avatar">
							<u-avatar :src="team.avatar"></u-avatar>
						</view>
						<view class="item-info">
							<view class="wlkflex" style="padding-bottom: 10rpx;">
								<view class="nickname bold">{{team.nickname}}</view>
								<view class="level-info wlkflex  ml20">
									<view class="icon mr10">
										<image class="wd100 hg100" lazy-load
											:src="team.agentInfo?agentInfo.level_info.image:'/static/images/plugins/commission/level.png'"
											mode="aspectFill" />
									</view>
									<view>
										{{team.agentInfo?agentInfo.level_info.name:'普通会员'}}
									</view>
								</view>
							</view>
							<view class="wlkflex mt05">
								<text>加入时间：</text>
								<text>{{$u.timeFormat(team.createtime,'yyyy/mm/dd')}}</text>
							</view>
						</view>
						<view class="item-more">
							<text class="ml15">团队{{team.childList.length}}人</text>
							<u-button type="primary" :plain="true" size="mini" text="发放优惠券" @click="jump('/pages/plugins/commission/coupon?uid=' + team.id)"></u-button>
						</view>
					</view>
					<view class="load-more">
						<u-loadmore :status="loadStatus" :loading-text="loadingText" :loadmore-text="loadmoreText"
							:nomore-text="nomoreText" dashed line />
					</view>
				</block>
			</scroll-view>
		</view>
		<view class="bg-icon">
			<image class="wd100 br04" :src="images.texture" mode="widthFix" />
		</view>
	</view>
</template>
<script>
	var _self;
	import {
		rgbaToRgb,
		toUrl
	} from '@/wlkutils/tools';
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	export default {
		computed: {
			...mapGetters(['userInfo', 'themeColor', 'isLogin', 'images', 'uEmpty'])
		},
		data() {
			return {
				uid: 0,
				bgColor: '',
				agentInfo: {},
				teams: [],
				itemHeight: '',
				systemInfo: uni.getSystemInfoSync(),
				page: 1,
				loadStatus: 'loading',
				loadingText: '努力加载中',
				loadmoreText: '轻轻上拉',
				nomoreText: '实在没有了',
				subList: ['一级', '二级'],
				curNow: 0,
				keyword: '',
			};
		},
		onLoad(options) {
			_self = this;
			this.bgColor = ' linear-gradient(to bottom,' + this.themeColor + ' ,' + uni.$u.colorToRgba('#FFFFFF', 0.01) +
				')';
			this.itemHeight = uni.$u.addUnit(this.systemInfo.windowHeight * 0.55, 'px');
			this.getData();
		},
		watch: {
			isLogin(val) {
				if (val) {
					_self.getData();
				}
			},
			themeColor(val) {
				this.bgColor = ' linear-gradient(to bottom,' + val + ' ,' + uni.$u.colorToRgba(rgbaToRgb('#FFFFFF'),
					0.01) + ')';
			}
		},
		methods: {
			scrolltolower() {
				if (this.loadStatus == "nomore") {
					return;
				}
				this.page++;
				this.getData();
			},
			getData() {
				uni.$u.http.post('commission/getTeam', {
					page: this.page,
					level: this.curNow,
					keyword: this.keyword
				}).then(res => {
					this.agentInfo = res.data.agentInfo;
					if (res && res.data && res.data.teams) {
						this.teams = this.teams.concat(res.data.teams);
					}
					this.loadStatus = res.data.teams.length < res.data.limit ? 'nomore' : 'loadmore';
				}).catch(res => {})
			},
			jump(path) {
				toUrl(path);
			},
			change() {
				if (uni.$u.test.isEmpty(this.keyword)) {
					this.init();
				}
			},
			search() {
				this.init();
			},
			sectionChange(index) {
				this.curNow = index;
				this.init();
			},
			init() {
				this.loadStatus = 'loading';
				this.page = 1;
				this.teams = [];
				this.getData();
			}
		}
	}
</script>
<style lang="scss">
	page {
		background-color: #FFFFFF;

		.team-content {
			/* #ifdef MP-WEIXIN */
			padding-top: 120rpx;
			/* #endif */
			/* #ifdef H5 */
			padding-top: 50rpx;

			/* #endif */
			.team-card {
				width: 95%;
				height: 390rpx;
				margin: 0 auto;
				border-radius: 20px;
				background-image: radial-gradient(circle at 13% 47%, rgba(140, 140, 140, 0.03) 0%, rgba(140, 140, 140, 0.03) 25%, transparent 25%, transparent 100%), radial-gradient(circle at 28% 63%, rgba(143, 143, 143, 0.03) 0%, rgba(143, 143, 143, 0.03) 16%, transparent 16%, transparent 100%), radial-gradient(circle at 81% 56%, rgba(65, 65, 65, 0.03) 0%, rgba(65, 65, 65, 0.03) 12%, transparent 12%, transparent 100%), radial-gradient(circle at 26% 48%, rgba(60, 60, 60, 0.03) 0%, rgba(60, 60, 60, 0.03) 6%, transparent 6%, transparent 100%), radial-gradient(circle at 97% 17%, rgba(150, 150, 150, 0.03) 0%, rgba(150, 150, 150, 0.03) 56%, transparent 56%, transparent 100%), radial-gradient(circle at 50% 100%, rgba(25, 25, 25, 0.03) 0%, rgba(25, 25, 25, 0.03) 36%, transparent 36%, transparent 100%), radial-gradient(circle at 55% 52%, rgba(69, 69, 69, 0.03) 0%, rgba(69, 69, 69, 0.03) 6%, transparent 6%, transparent 100%), linear-gradient(90deg, rgb(255, 255, 255), rgb(255, 255, 255));
				padding: 35rpx 35rpx;

				.team-num {
					font-size: $font-macro;
				}

				.title {
					font-size: $font-base;
					color: $uni-text-color-grey;
				}

				.other-num {
					font-size: $font-max;
				}

				.agent {
					font-size: $font-base;
					color: $uni-text-color-grey;
				}

				.icon {
					background: linear-gradient(to left bottom, #ffae86, #ff7d67);
					padding: 10rpx 30rpx;
					border-radius: 20px 0 20px 4px;
					overflow: hidden;
					display: flex;
					align-items: center;
					position: absolute;
					bottom: 0;
					right: 0;
					box-shadow: -8px 3px 0 #F6E8E5;
				}
			}
		}

		.sub-box {
			background-color: #FFFFFF;
			height: 110px;

			.head-title {
				font-size: $font-lg;
				font-weight: bold;
			}

			.sub-item {
				width: 30%;
			}
		}

		.team-list {
			height: 70%;
			background-color: white;

			.team-item {
				.item-avatar {
					width: 15%;
				}

				.item-info {
					width: 55%;
					font-size: $font-sm;
					color: $uni-text-color-grey;

					.nickname {
						font-size: $font-lt;
						color: $uni-text-color;
					}

					.level-info {
						padding-right: 15rpx;
						border-radius: 40rpx;
						font-size: $font-sm;
						color: white;
						background-color: rgba(0, 0, 0, 0.3);

						.icon {
							padding: 5rpx;
							background-color: white;
							width: 35rpx;
							height: 35rpx;
							border-radius: 50%;
							overflow: hidden;
						}
					}
				}

				.item-more {
					width: 25%;
					font-size: $font-sm;
					color: $uni-text-color-grey;
					text-align: right;

					.button {
						margin-top: 10rpx;
						color: $uni-text-color-grey;
						border-radius: 20rpx;
						border: 1rpx solid $uni-text-color-grey;
					}
				}
			}
		}

		.bg-icon {
			position: absolute;
			top: -220rpx;
			right: -220rpx;
			z-index: 99;
			width: 100%;
			height: 700rpx;
			opacity: .1;
			overflow: hidden;
		}

	}
</style>